<script setup>
	
</script>
<template>
  <div class="category">
    <ul>
      <li>
        <div class="phone"><img alt="" src="./img/手机充值.png"></div>
        <p>手机充值</p>
      </li>
      <li>
        <div class="phone"><img alt="" src="./img/医疗APP.png"></div>
        <p>医保购险</p>
      </li>
      <li>
        <div class="phone"><img alt="" src="./img/运动.png"></div>
        <p>运动</p>
      </li>
      <li>
        <div class="phone"><img alt="" src="./img/求职就业.png"></div>
        <p>求职就业</p>
      </li>
      <li>
        <div class="phone"><img alt="" src="./img/奖学金助手.png"></div>
        <p>学费缴费</p>
      </li>
      <li>
        <div class="phone"><img alt="" src="./img/国家政务服务平台.png"></div>
        <p>国家政务服务平台</p>
      </li>
      <li>
        <div class="phone"><img alt="" src="./img/学信网.png"></div>
        <p>学信网</p>
      </li>
      <li>
        <div class="phone"><img alt="" src="./img/乘车码.jpg"></div>
        <p>微信乘车码</p>
      </li>
      <li>
        <div class="phone"><img alt="" src="./img/小拉出行.png"></div>
        <p>小拉出行</p>
      </li>
      <li>
        <div class="phone"><img alt="" src="./img/滴滴出行.png"></div>
        <p>滴滴出行</p>
      </li>
      <li>
        <div class="phone"><img alt="" src="./img/花小猪.png"></div>
        <p>花小猪</p>
      </li>
      <li>
        <div class="phone"><img alt="" src="./img/火车站.png"></div>
        <p>铁路12306</p>
      </li>
      <li>
        <div class="phone"><img alt="" src="./img/高铁管家.png"></div>
        <p>高铁管家</p>
      </li>
      <li>
        <div class="phone"><img alt="" src="./img/智行.jpg"></div>
        <p>智行</p>
      </li>
      <li>
        <div class="phone"><img alt="" src="./img/易校园.png"></div>
        <p>易校园</p>
      </li>
      <li>
        <div class="phone"><img alt="" src="./img/天猫校园.png"></div>
        <p>天猫校园</p>
      </li>
      <li>
        <div class="phone"><img alt="" src="./img/学习通1.png"></div>
        <p>学习通</p>
      </li>

      <li>
        <div class="phone"><img alt="" src="./img/慧生活小程序.png"></div>
        <p>慧生活</p>
      </li>
      <li>
        <div class="phone"><img alt="" src="./img/菜鸟.png"></div>
        <p>菜鸟</p>
      </li>
      <li>
        <div class="phone"><img alt="" src="./img/海享租.png"></div>
        <p>海享租</p>
      </li>
      <li>
        <div class="phone"><img alt="" src="./img/胖乖生活.jpg"></div>
        <p>胖乖生活</p>
      </li>

      <li>
        <div class="phone"><img alt="" src="./img/猫眼电影.png"></div>
        <p>猫眼电影</p>
      </li>
      <li>
        <div class="phone"><img alt="" src="./img/美团.png"></div>
        <p>美团</p>
      </li>
      <li>
        <div class="phone"><img alt="" src="./img/拼多多.png"></div>
        <p>拼多多</p>
      </li>
      <li>
        <div class="phone"><img alt="" src="./img/京东.png"></div>
        <p>京东</p>
      </li>
      <li>
        <div class="phone"><img alt="" src="./img/蜜雪冰城.png"></div>
        <p>蜜雪冰城</p>
      </li>
      <li>
        <div class="phone"><img alt="" src="./img/茶百道.png"></div>
        <p>茶百道</p>
      </li>
      <li>
        <div class="phone"><img alt="" src="./img/零食很忙.jpg"></div>
        <p>零食很忙</p>
      </li>
      <li>
        <div class="phone"><img alt="" src="./img/饿了么.png"></div>
        <p>饿了么</p>
      </li>
      <li>
        <div class="phone"><img alt="" src="./img/华莱士.jpg"></div>
        <p>华莱士</p>
      </li>
    </ul>
  </div>
</template>

<style scoped>
/* 	* {
	  margin: 0;
	  padding: 0;
	  list-style: none;
	  box-sizing: border-box;
	} */

html, body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

img {
  width: 40px;
  height: 40px;
  object-fit: fill;
}

ul {
  width: 100%;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}

ul li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

ul li .phone {
  padding: 10px;
  height: 60px;
}

ul li p {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 20px;
}

</style>